<!DOCTYPE html>
<html>
	{include file="public/_header" /}
	<script type="text/javascript" src="__STATIC__/admin/lib/layui_exts/echarts/echarts.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/lib/layui_exts/echarts/echartsTheme.js"></script>
	<style>
		.demo-cp-item {
            display: inline-block;
            text-align: center;
            margin: 8px 25px 0 25px;
            color: #666;
        }

        .demo-cp-item > div:nth-child(2) {
            margin-top: 6px;
        }

        /** 自定义样式1 */
        #demoProgress9 .circle-progress-value {
            stroke-width: 11px;
            stroke: #00CC00;
            stroke-dasharray: 0 23.3;
            stroke-linecap: round;
        }

        #demoProgress9 .circle-progress-circle {
            stroke: transparent;
        }

        #demoProgress9 .circle-progress-text {
            font-family: "Gotham rounded";
            font-size: 16px;
            fill: #00CC00;
        }

        /** 自定义样式2 */
        #demoProgress10 .circle-progress-circle {
            stroke-width: 6px;
            stroke: #ccc;
            stroke-dasharray: 1 5;
            stroke-dashoffset: 1.6;
        }

        #demoProgress10 .circle-progress-value {
            stroke: #43A3FB;
        }

        #demoProgress10.circle-progress-success .circle-progress-value {
            stroke: #5CB85C;
        }

        #demoProgress10.circle-progress-success .circle-progress-text {
            fill: #5CB85C;
        }

        /** 自定义样式3 */
        #demoProgress11 .circle-progress-value {
            stroke-width: 8px;
            stroke: #3FDABA;
        }

        #demoProgress11 .circle-progress-circle {
            stroke-width: 6px;
            stroke: #E0FAF1;
        }

        /** 自定义样式4 */
        #demoProgress12 .circle-progress-value {
            stroke-width: 22px;
            stroke: #3FDABA;
            stroke-dasharray: 60 2;
            stroke-linecap: butt;
        }

        #demoProgress12 .circle-progress-circle {
            stroke: #E0FAF1;
            stroke-width: 22px;
            fill: #E0FAF1;
        }

        #demoProgress12 .circle-progress-text {
            font-family: "Gotham";
            font-size: 16px;
            fill: #3FDABA;
        }

        /** 自定义样式5 */
        #demoProgress13 > svg {
            width: 40px;
            height: 40px;
        }

        #demoProgress13 .circle-progress-value {
            stroke-width: 8px;
        }

        #demoProgress13 .circle-progress-circle {
            stroke-width: 8px;
        }

        #demoProgress13 .circle-progress-text {
            font-size: 30px;
        }
    </style>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a>
					<cite>下拉菜单</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="float:right" onclick="location.reload()"
			 title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>

		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">基本用法</div>
				<div class="layui-card-body">
					<div class="demo-cp-item">
						<div id="demoProgress1"></div>
						<div>默认样式</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress2"></div>
						<div>逆时针方向</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress3"></div>
						<div>自定义起始位置</div>
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">文字样式</div>
				<div class="layui-card-body">
					<div class="demo-cp-item">
						<div id="demoProgress4"></div>
						<div>vertical</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress5"></div>
						<div>percent</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress6"></div>
						<div>value</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress7"></div>
						<div>valueOnCircle</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress8"></div>
						<div>none</div>
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">自定义样式</div>
				<div class="layui-card-body">
					<div class="demo-cp-item">
						<div id="demoProgress9"></div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress10"></div>
					</div>
					<div class="demo-cp-item">
						<div style="position: relative;">
							<div id="demoProgress11"></div>
							<div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">
								<div style="font-size: 22px;color: #3DDABB;">60<span style="font-size: 14px;">%</span></div>
								<div style="color: #515a6e;font-size: 14px;">通过率</div>
							</div>
						</div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress12"></div>
					</div>
					<div class="demo-cp-item">
						<div id="demoProgress13"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">基本用法</div>
				<div class="layui-card-body" style="padding: 25px 15px 20px 15px;">
					<div class="layui-form">
						<div class="layui-form-item">
							<label for="" class="layui-form-label">默认图标</label>
							<div class="layui-input-block">
								<input type="text" id="iconPicker" lay-filter="iconPicker" class="hide">
							</div>
						</div>
						<div class="layui-form-item">
							<label for="" class="layui-form-label">自定义图标</label>
							<div class="layui-input-block">
								<input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2" class="hide">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">弹窗选择</label>
							<div class="layui-input-block">
								<button id="layer" class="layui-btn">点击打开弹窗</button>
							</div>
						</div>
					</div>

					<div id="layer-modal" style="display: none;">
						<div style="padding: 18px;">
							<input type="text" id="iconPicker3" lay-filter="iconPicker3" value="layui-icon-face-smile-fine" class="layui-input">
							<br>
							<input type="text" id="iconPicker3-2" lay-filter="iconPicker3-2" class="layui-input">
							<button id="btnSubmit3-2" class="layui-btn">获取当前值</button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">基本用法</div>
				<div class="layui-card-body" style="padding: 25px 15px 20px 15px;">
					<div id="transferTable"></div>
				</div>
			</div>
		</div>







		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header">基本用法</div>
				<div class="layui-card-body" style="padding: 25px 15px 20px 15px;">
					<div class="layui-btn-container">
						<div class="dropdown-menu dropdown-hover">
							<button class="layui-btn icon-btn">
								&nbsp;Hover方式触发 <i class="layui-icon layui-icon-drop"></i></button>
							<ul class="dropdown-menu-nav">
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn icon-btn">
								&nbsp;点击方式触发 <i class="layui-icon layui-icon-drop"></i>
							</button>
							<ul class="dropdown-menu-nav">
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu dropdown-hover">
							<button class="layui-btn icon-btn">
								&nbsp;带箭头指示 <i class="layui-icon layui-icon-drop"></i>
							</button>
							<ul class="dropdown-menu-nav">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu dropdown-hover">
							<button class="layui-btn icon-btn">
								&nbsp;更多样式 <i class="layui-icon layui-icon-drop"></i></button>
							<ul class="dropdown-menu-nav">
								<li class="title">HEADER</li>
								<li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
								<li class="disabled">
									<a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
								<hr>
								<li class="title">HEADER</li>
								<li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">进阶用法</div>
				<div class="layui-card-body" style="padding: 25px 15px 20px 15px;">
					<div class="dropdown-menu dropdown-hover" style="margin: 0 13px 10px 0;">
						<input type="text" placeholder="可用于任意元素" class="layui-input" />
						<ul class="dropdown-menu-nav">
							<li class="title">是不是在找</li>
							<li><a>一个会跳舞的输入框</a></li>
							<li><a>一杯忧郁的可乐</a></li>
						</ul>
					</div>
					<div class="layui-btn-container layui-inline" style="vertical-align: baseline;">
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-normal icon-btn">
								&nbsp;暗色主题 <i class="layui-icon layui-icon-drop"></i></button>
							<ul class="dropdown-menu-nav dark">
								<div class="dropdown-anchor"></div>
								<li class="title">HEADER</li>
								<li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
								<li class="disabled">
									<a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
								<hr>
								<li class="title">HEADER</li>
								<li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
							</ul>
						</div>
						<button class="layui-btn layui-btn-normal icon-btn" data-dropdown="#dropdownExp1">
							&nbsp;显示遮罩层 <i class="layui-icon layui-icon-drop"></i></button>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-normal icon-btn">
								&nbsp;自定义下拉内容 <i class="layui-icon layui-icon-drop"></i></button>
							<div class="dropdown-menu-nav dropdown-bottom-right" style="width: 280px;padding: 0 10px 10px 10px;">
								<div class="dropdown-anchor"></div>
								<div class="layui-tab layui-tab-brief">
									<ul class="layui-tab-title">
										<li class="layui-this">HTTPS</li>
										<li>SSH</li>
									</ul>
									<div class="layui-tab-content" style="padding: 10px 0 10px 0;">
										<div class="layui-tab-item layui-show layui-text">
											<input class="layui-input" value="https://gitee.com/whvse/easyweb-jwt.git" readonly />
										</div>
										<div class="layui-tab-item layui-text">
											<input class="layui-input" value="git@gitee.com:whvse/easyweb-jwt.git" readonly />
										</div>
									</div>
								</div>
								<button class="layui-btn layui-btn-sm layui-btn-fluid" style="margin-bottom: 10px;">
									Download ZIP
								</button>
								<img src="http://p1.music.126.net/voV3yPduAhNATICMRJza1A==/109951164017919367.jpg" width="100%">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">显示方向控制</div>
				<div class="layui-card-body" style="padding: 25px 15px;">
					<div class="layui-btn-container">
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								<i class="layui-icon layui-icon-drop"></i> Bottom Left
							</button>
							<ul class="dropdown-menu-nav">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								Bottom <i class="layui-icon layui-icon-drop"></i> Center
							</button>
							<ul class="dropdown-menu-nav dropdown-bottom-center">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								Bottom Right <i class="layui-icon layui-icon-drop"></i>
							</button>
							<ul class="dropdown-menu-nav dropdown-bottom-right">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								Right Center <i class="layui-icon layui-icon-drop right"></i></button>
							<ul class="dropdown-menu-nav dropdown-right-center">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								<i class="layui-icon layui-icon-drop top"></i> Top Left
							</button>
							<ul class="dropdown-menu-nav dropdown-top-left">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								Top <i class="layui-icon layui-icon-drop top"></i> Center
							</button>
							<ul class="dropdown-menu-nav dropdown-top-center">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								Top Right <i class="layui-icon layui-icon-drop top"></i></button>
							<ul class="dropdown-menu-nav dropdown-top-right">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
						<div class="dropdown-menu">
							<button class="layui-btn layui-btn-primary icon-btn">
								<i class="layui-icon layui-icon-drop left"></i> Left Center
							</button>
							<ul class="dropdown-menu-nav dropdown-left-center">
								<div class="dropdown-anchor"></div>
								<li><a>1st menu item</a></li>
								<li><a>2nd menu item</a></li>
								<li><a>3rd menu item</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 下拉菜单 -->
		<ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="dropdownExp1">
			<div class="dropdown-anchor"></div>
			<li class="title">HEADER</li>
			<li><a><i class="layui-icon layui-icon-star-fill"></i>1st menu item</a></li>
			<li class="disabled">
				<a><i class="layui-icon layui-icon-template-1"></i>2nd menu item</a></li>
			<hr>
			<li class="title">HEADER</li>
			<li><a><i class="layui-icon layui-icon-set-fill"></i>3rd menu item</a></li>
		</ul>
		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">

				<div class="layui-col-xs12 layui-col-md8">
					<div class="layui-card" style="">
						<div class="layui-card-header">活动实时交易情况</div>
						<div class="layui-card-body">
							<div class="layui-row">
								<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
									<div class="numberInfoSubTitle">今日交易总额</div>
									<div class="numberInfoValue">
										124,543,233<em class="numberInfoSuffix">元</em>
									</div>
								</div>
								<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
									<div class="numberInfoSubTitle">销售目标完成率</div>
									<div class="numberInfoValue">92%</div>
								</div>
								<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
									<div class="numberInfoSubTitle">活动剩余时间</div>
									<div class="numberInfoValue">00:57:10</div>
								</div>
								<div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center">
									<div class="numberInfoSubTitle">每秒交易总额</div>
									<div class="numberInfoValue">
										234<em class="numberInfoSuffix">元</em>
									</div>
								</div>
							</div>
							<div style="text-align: center;padding: 30px 0 10px 0;">
								<img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" style="max-height: 437px; max-width: 100%;"
								 alt="map">
							</div>
						</div>
					</div>
				</div>

				<div class="layui-col-xs12 layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header">活动情况预测</div>
						<div class="layui-card-body" style="height: 240px;overflow: hidden;">
							<div id="hdqkyc" style="width: 100%;height: 260px;"></div>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">券核效率</div>
						<div class="layui-card-body" style="height: 222px;overflow: hidden;">
							<div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div>
						</div>
					</div>
				</div>

				<div class="layui-col-xs12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
								<ul class="layui-tab-title">
									<li class="layui-this">销售额</li>
									<li>访问量</li>
								</ul>
								<div class="layui-tab-content">
									<div class="layui-tab-item layui-show">
										<div class="layui-row layui-col-space30">
											<div class="layui-col-xs12 layui-col-md8">
												<div id="xse" style="height: 300px;margin-top: 20px;"></div>
											</div>
											<div class="layui-col-xs12 layui-col-md4">
												<table class="layui-table" lay-skin="nob">
													<colgroup>
														<col width="50">
														<col>
														<col width="96">
													</colgroup>
													<thead>
														<tr style="background: none;color: #333;">
															<th colspan="3">门店销售额排名</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">1</span></td>
															<td>工专路 0 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">2</span></td>
															<td>工专路 1 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">3</span></td>
															<td>工专路 2 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">4</span></td>
															<td>工专路 4 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">5</span></td>
															<td>工专路 5 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">6</span></td>
															<td>工专路 6 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">7</span></td>
															<td>工专路 7 号店</td>
															<td>323,234</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
									<div class="layui-tab-item">
										<div class="layui-row layui-col-space30">
											<div class="layui-col-xs12 layui-col-md8">
												<div id="fwl" style="height: 300px;margin-top: 20px;"></div>
											</div>
											<div class="layui-col-xs12 layui-col-md4">
												<table class="layui-table" lay-skin="nob">
													<colgroup>
														<col width="50">
														<col>
														<col width="96">
													</colgroup>
													<thead>
														<tr style="background: none;color: #333;">
															<th colspan="3">门店访问量排名</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">1</span></td>
															<td>工专路 0 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">2</span></td>
															<td>工专路 1 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-cyan">3</span></td>
															<td>工专路 2 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">4</span></td>
															<td>工专路 4 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">5</span></td>
															<td>工专路 5 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">6</span></td>
															<td>工专路 6 号店</td>
															<td>323,234</td>
														</tr>
														<tr>
															<td><span class="layui-badge layui-bg-gray">7</span></td>
															<td>工专路 7 号店</td>
															<td>323,234</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
	</body>
	<script type="text/javascript">
		layui.extend({
			dropdown: 'dropdown/dropdown',
			CircleProgress: 'circleprogress/CircleProgress'
		}).use(['layer', 'dropdown', 'element', 'CircleProgress'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var dropdown = layui.dropdown;
			var element = layui.element;
			var CircleProgress = layui.CircleProgress;
			// 渲染活动情况预测
			var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
			var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
			var option = {
				title: {
					text: '有望达到预期',
					subtext: '目标评估',
					textStyle: {
						color: '#000'
					}
				},
				tooltip: {
					trigger: "axis"
				},
				xAxis: [{
					type: "category",
					boundaryGap: !1,
					data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00",
						"12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"
					]
				}],
				yAxis: [{
					type: "value"
				}],
				series: [{
					name: "金额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data: mData
				}]
			};
			myCharts.setOption(option);

			// 动态改变图表1数据
			setInterval(function() {
				for (var i = 0; i < mData.length; i++) {
					mData[i] += (Math.random() * 50 - 25);
					if (mData[i] < 0) {
						mData[i] = 0;
					}
				}
				myCharts.setOption({
					series: [{
						data: mData
					}]
				});
			}, 1000);

			// 渲染券核效率图表
			var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme);
			var option2 = {
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%"
				},
				series: [{
					name: '券核效率',
					type: 'gauge',
					detail: {
						formatter: '{value}%'
					},
					data: [{
						value: 80,
						name: '跳出率'
					}]
				}]
			};
			myCharts2.setOption(option2);

			// 渲染销售额图表
			var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
			var option3 = {
				title: {
					text: '销售趋势',
					textStyle: {
						color: '#000',
						fontSize: 14
					}
				},
				tooltip: {},
				grid: {
					left: '0',
					right: '0',
					bottom: '0',
					containLabel: true
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				},
				yAxis: {},
				series: [{
					type: 'bar',
					data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506],
					barMaxWidth: 45
				}]
			};
			myCharts3.setOption(option3);

			// 渲染访问量图表
			var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
			var option4 = {
				title: {
					text: '访问量趋势',
					textStyle: {
						color: '#000',
						fontSize: 14
					}
				},
				tooltip: {},
				grid: {
					left: '0',
					right: '0',
					bottom: '0',
					containLabel: true
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				},
				yAxis: {},
				series: [{
					type: 'bar',
					data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
					barMaxWidth: 45
				}]
			};
			myCharts4.setOption(option4);

			// 切换选项卡重新渲染
			element.on('tab(tabZZT)', function(data) {
				if (data.index == 0) {
					myCharts3.resize();
				} else {
					myCharts4.resize();
				}
			});

			// 窗口大小改变事件
			window.onresize = function() {
				myCharts.resize();
				myCharts2.resize();
				myCharts3.resize();
				myCharts4.resize();
			};

			// 快速使用
			new CircleProgress('#demoProgress1', {
				max: 100,
				value: 20,
			});

			// 逆时针方向
			new CircleProgress('#demoProgress2', {
				max: 100,
				value: 20,
				clockwise: false
			});

			// 自定义起始位置
			new CircleProgress('#demoProgress3', {
				max: 100,
				value: 20,
				startAngle: 225
			});

			// 文字垂直
			new CircleProgress('#demoProgress4', {
				max: 100,
				value: 20,
				textFormat: 'vertical'
			});

			// 文字百分比
			new CircleProgress('#demoProgress5', {
				max: 100,
				value: 20,
				textFormat: 'percent'
			});

			// 文字只显示值
			new CircleProgress('#demoProgress6', {
				max: 100,
				value: 20,
				textFormat: 'value'
			});

			// 文字值显示在进度条上
			new CircleProgress('#demoProgress7', {
				max: 100,
				value: 20,
				textFormat: 'valueOnCircle'
			});

			// 文字不显示
			new CircleProgress('#demoProgress8', {
				max: 100,
				value: 20,
				textFormat: 'none'
			});

			// 自定义样式1
			new CircleProgress('#demoProgress9', {
				max: 12,
				value: 9,
				textFormat: function(value, max) {
					return value + ' dots';
				}
			});
			// 自定义样式2
			var ins10 = new CircleProgress('#demoProgress10', {
				max: 100,
				value: 0,
				textFormat: function(value, max) {
					if (value == max) {
						return 'OK';
					} else {
						return value + '%';
					}
				}
			});

			var timer10 = setInterval(function() {
				ins10.value += 1;
				if (ins10.value == ins10.max) {
					$('#demoProgress10').addClass('circle-progress-success');
					clearInterval(timer10);
				}
			}, 100);

			// 自定义样式3
			new CircleProgress('#demoProgress11', {
				max: 100,
				value: 60,
				textFormat: 'none'
			});
			// 自定义样式4
			new CircleProgress('#demoProgress12', {
				max: 4,
				value: 3,
				textFormat: 'vertical',
				clockwise: false
			});
			// 自定义样式5
			new CircleProgress('#demoProgress13', {
				max: 100,
				value: 20,
				textFormat: 'percent'
			});



		});
		layui.extend({
			iconPicker: 'iconpicker/iconPicker',
			transferTable: 'transferTable/transferTable',
		}).use(['iconPicker', 'form', 'layer', 'transferTable'], function() {
			var iconPicker = layui.iconPicker,
				form = layui.form,
				layer = layui.layer,
				transferTable = layui.transferTable,
				$ = layui.$;

			iconPicker.render({
				// 选择器，推荐使用input
				elem: '#iconPicker',
				// 数据类型：fontClass/unicode，推荐使用fontClass
				type: 'fontClass',
				// 是否开启搜索：true/false，默认true
				search: true,
				// 是否开启分页：true/false，默认true
				page: true,
				// 每页显示数量，默认12
				limit: 12,
				// 点击回调
				click: function(data) {
					console.log(data);
				},
				// 渲染成功后的回调
				success: function(d) {
					console.log(d);
				}
			});


			// ********************** 示例2 - 默认值 *****************************************
			iconPicker.render({
				// 选择器，推荐使用input
				elem: '#iconPicker2',
				// 数据类型：fontClass/unicode，推荐使用fontClass
				type: 'fontClass',
				// 是否开启搜索：true/false
				search: true,
				// 是否开启分页
				page: true,
				// 每页显示数量，默认12
				limit: 12,
				// 点击回调
				click: function(data) {
					console.log(data);
				},
				// 渲染成功后的回调
				success: function(d) {
					console.log(d);
				}
			});

			// ********************** 示例2 END *****************************************


			// ********************* 示例3 - 弹窗中打开 **********************************
			iconPicker.render({
				elem: '#iconPicker3',
				type: 'fontClass',
				search: true,
				page: true,
				limit: 12,
				click: function(data) {
					console.log(data);
				},
				success: function(d) {
					console.log(d);
				}
			});

			iconPicker.render({
				elem: '#iconPicker3-2',
				type: 'fontClass',
				search: true,
				page: true,
				limit: 12,
				click: function(data) {
					console.log(data);
				},
				success: function(d) {
					console.log(d);
				}
			});

			$('#layer').click(function() {
				layer.open({
					type: 1,
					area: ['500px', '400px'],
					content: $('#layer-modal'),
					success: function(layero) {
						iconPicker.checkIcon('iconPicker3-2', 'layui-icon-cellphone');
					}
				});
			});

			$('#btnSubmit3-2').click(function() {
				alert($('#iconPicker3-2').val());
			});

			var cols = [{
				checkbox: true,
				fixed: true
			}, {
				field: 'id',
				title: 'ID'
			}, {
				field: 'username',
				title: '用户名'
			}, {
				field: 'sex',
				title: '性别'
			}]
			
			transferTable.render({
				elem: '#transferTable',
				url: ["http://www.unicms.cc/api/v1/index/transferTable?t=1", "http://www.unicms.cc/api/v1/index/transferTable?t=2"],
				cols: [
					[cols],
					[cols]
				],
				page: [true, true],
				id: ['transferTable_1_1', 'transferTable_2_2'],
				height: [500, 500],
				where: {
					id: '1,2,3'
				},
				id_name: 'id'
			})

			$('#reload').on('click', function() {
				transferTable.reload('transferTable_1_1', {
					page: {
						curr: 1
					},
					where: {
						title: $('#title').val(),
						sex: $('#sex').val()
					}
				})
			})

			$('#submit').on('click', function() {
				var id = transferTable.get('transferTable_2_2');
				layer.msg(JSON.stringify(id));
			})

			// ********************* 示例3 END **********************************




		});
	</script>
</html>
